import React, { useEffect, useCallback, useState } from 'react'
import {
    Form,
    Select,
    Button,
    Upload,
    Input,
    message
} from 'antd';
import { UploadOutlined, InboxOutlined } from '@ant-design/icons';
import lesson from '../../../api/lesson/index';
import { getCourseListApi } from '../../../api/coures/course.js';
const { Option } = Select;
export default function AddLesson() {
    const [courseList, setCourseList] = useState([]);
    useEffect(() => {
        getCourseData();
    }, [getCourseData])
    const formItemLayout = {
        labelCol: { span: 6 },
        wrapperCol: { span: 14 },
    };

    function normFile(e) {
        console.log('Upload event:', e);
        if (Array.isArray(e)) {
            return e;
        }
        return e && e.fileList;
    };

    const getCourseData = useCallback(async () => {
        const { data } = await getCourseListApi();
        console.log(data, '课程数据');
        setCourseList([...data.records]);
    })
    async function onFinish({ courseId, duration, isFree, sort, status, title, video }) {
        console.log('Received values of form: ', courseId, duration, isFree, sort, status, title, video);
        const data = await lesson.addLesson({ courseId, duration: duration - 0, isFree, sort: sort - 0, status, title, video: '51516.mp4' });
        if (data.code === 200) {
            message.success('新增成功');
        } else {
            message.error('新增失败');

        }
    };

    return (
        <div>
            <Form
                name="validate_other"
                {...formItemLayout}
                onFinish={onFinish}
                initialValues={{
                    'input-number': 3,
                    'checkbox-group': ['A', 'B'],
                    rate: 3.5,
                }}
            >
                <Form.Item >
                    <span className="ant-form-text">新增课时</span>
                </Form.Item>
                <Form.Item
                    name="courseId"
                    label="课程id"
                    hasFeedback
                    rules={[{ required: true, message: '请选择课程id！！！' }]}
                >
                    <Select placeholder="请选择课程">
                        {courseList.map(item => {
                            return (
                                <Option value={item.id} key={item.id}>{item.name}</Option>
                            )
                        })}

                    </Select>
                </Form.Item>

                <Form.Item name='title' label='课时名称' rules={[{ required: true, message: '请输入课时名称!!' }]}>
                    <Input />
                </Form.Item>
                <Form.Item name='sort' label='课时序号' rules={[{ required: true, message: '请输入课时序号!!' }]}>
                    <Input />
                </Form.Item>
                <Form.Item name='duration' label='课时时长' >
                    <Input />
                </Form.Item>
                <Form.Item name="status" label="是否上架" rules={[{ required: true, message: '请选择是否上架!!' }]}>
                    <Select placeholder="请选择是否上架">
                        <Option value="y">上架</Option>
                        <Option value="n">下架</Option>
                    </Select>
                </Form.Item>
                <Form.Item name="isFree" label="是否免费" rules={[{ required: true, message: '请选择是否免费' }]} >
                    <Select placeholder="请选择是否免费">
                        <Option value="y">免费</Option>
                        <Option value="n">收费</Option>
                    </Select>
                </Form.Item>

                <Form.Item label="Dragger">
                    <Form.Item name="video" valuePropName="fileList" getValueFromEvent={normFile} noStyle>
                        <Upload.Dragger name="files" action="/upload.do">
                            <p className="ant-upload-drag-icon">
                                <InboxOutlined />
                            </p>
                            <p className="ant-upload-text">Click or drag file to this area to upload</p>
                            <p className="ant-upload-hint">Support for a single or bulk upload.</p>
                        </Upload.Dragger>
                    </Form.Item>
                </Form.Item>

                <Form.Item wrapperCol={{ span: 12, offset: 6 }}>
                    <Button type="primary" htmlType="submit">
                        Submit
                    </Button>
                </Form.Item>
            </Form>
        </div>
    )
}

